<template>
  <!--todo:私信-->
  <navigator-menu></navigator-menu>

  <div
    style="
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      overflow: hidden;
    "
  >
    <img :src="cover" alt="" style="width: 100vw; z-index: 0" />
  </div>

  <el-card
    shadow="always"
    style="border-radius: 35px 15px; height: 100vh; margin: 10vw; opacity: 0.9"
  >
    <div class="msg-title" style="display: flex; justify-content: center">
      <h2 style="margin: 15px; font-size: 25px">消息中心</h2>
    </div>
    <el-divider style="margin: 15px 0"></el-divider>
    <el-tabs class="big-tab" :tab-position="tabPosition" style="margin: 20px">
      <!--系统通知-->
      <el-tab-pane style="margin: 10px 0">
        <template #label>
          <span>
            <div v-if="unreadSys <= 0">
              <p class="typeList">系统通知</p>
            </div>
            <div v-else>
              <el-badge is-dot>
                <p class="typeList">系统通知</p>
              </el-badge>
            </div>
          </span>
        </template>
        <div class="sys-msg">
          <el-tabs
            type="card"
            closable
            @tab-remove="removeTab1"
            v-model="sysEnalbleShow"
          >
            <el-tab-pane label="通知列表" :name="init">
              <div
                class="allRead"
                @click="allSetRead1()"
                style="margin-right: 10px"
              >
                <el-icon style="margin: 0 5px; font-size: 17px"
                  ><circle-check-filled
                /></el-icon>
                <p style="font-size: 14px; margin: 0">全部设为已读</p>
              </div>
              <div v-if="total[0] === 0">
                <el-empty description="暂时没有新通知"></el-empty>
              </div>
              <div v-else>
                <el-scrollbar height="650px">
                  <el-card
                    shadow="hover"
                    class="single-sysmsg"
                    v-for="(msg, index1) in sysMsg"
                    :key="index1"
                    style="
                      padding: 10px;
                      margin: 5px 0;
                      font-size: 15px;
                      height: 70px;
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                    "
                  >
                    <div style="display: flex">
                      <div
                        style="display: flex; width: 95%"
                        @click="addTab(index1, 1)"
                      >
                        <div v-if="msg.isRead">
                          <el-icon style="margin-right: 5px; font-size: 18px"
                            ><warning-filled
                          /></el-icon>
                        </div>
                        <div v-else style="margin-right: 5px">
                          <el-badge is-dot>
                            <el-icon style="font-size: 16px; color: red"
                              ><message
                            /></el-icon>
                          </el-badge>
                        </div>
                        <div
                          style="
                            width: 300px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ msg.content }}
                        </div>
                        <div style="margin-left: auto; color: #9a9999">
                          {{ msg.createTime }}
                        </div>
                      </div>
                      <div
                        style="
                          display: flex;
                          margin-left: auto;
                          align-items: center;
                        "
                      >
                        <el-icon
                          style="
                            font-size: 20px;
                            cursor: pointer;
                            margin-left: auto;
                          "
                          @click="deletSysMsg(msg, 1)"
                          ><delete
                        /></el-icon>
                      </div>
                    </div>
                  </el-card>
                </el-scrollbar>
              </div>
            </el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="index"
              :name="item.id"
            >
              <template #label>
                <span>
                  <el-icon><bell /></el-icon>系统通知
                </span>
              </template>
              <div>
                <div style="display: flex">
                  <p style="margin: 5px; font-size: 12px">
                    {{ item.createTime }}
                  </p>
                  <div style="margin-left: auto; width: 50px">
                    <el-tooltip
                      placement="bottom-start"
                      content="删除该系统消息"
                    >
                      <el-icon
                        style="font-size: 20px; cursor: pointer"
                        @click="deletSysMsg(item, 1)"
                        ><delete /></el-icon
                    ></el-tooltip>
                  </div>
                </div>
                <el-divider style="margin: 10px 0px 15px 0px"></el-divider>
                <div class="sys-detail">
                  {{ item.content }}
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <!-- 私信通知-->
      <el-tab-pane style="margin: 10px 0">
        <template #label>
          <span>
            <div v-if="unreadNum <= 0">
              <p class="typeList">私信通知</p>
            </div>
            <div v-else>
              <el-badge is-dot>
                <p class="typeList">私信通知</p>
              </el-badge>
            </div>
          </span>
        </template>
        <div class="person-msg">
          <el-tabs
            type="card"
            closable
            @tab-remove="removeTab2"
            v-model="sysEnalbleShow2"
          >
            <el-tab-pane label="私信列表" :name="init2">
              <div class="allRead" @click="allSetRead2()">
                <el-icon style="margin: 0 5px; font-size: 17px"
                  ><circle-check-filled
                /></el-icon>
                <p style="font-size: 14px; margin: 0">全部设为已读</p>
              </div>
              <div v-if="total[1] === 0">
                <el-empty description="暂时没有新的私信"></el-empty>
              </div>
              <div v-else>
                <el-scrollbar height="650px">
                  <el-card
                    shadow="hover"
                    class="single-sysmsg"
                    v-for="(msg, index1) in personMsg"
                    :key="index1"
                    style="
                      padding: 10px;
                      margin: 5px 0;
                      font-size: 15px;
                      height: 100px;
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                    "
                  >
                    <div style="display: flex">
                      <div style="width: 95%" @click="addTab(index1, 2)">
                        <div
                          style="
                            display: flex;
                            width: 100%;
                            align-items: center;
                          "
                        >
                          <div v-if="msg.isRead" style="margin-right: 10px">
                            <el-icon style="font-size: 16px"
                              ><document
                            /></el-icon>
                          </div>
                          <div v-else style="margin-right: 10px">
                            <el-badge is-dot>
                              <el-icon style="font-size: 16px; color: red"
                                ><message
                              /></el-icon>
                            </el-badge>
                          </div>
                          <div
                            style="
                              width: 50%;
                              overflow: hidden;
                              white-space: nowrap;
                              text-overflow: ellipsis;
                              display: flex;
                              align-items: center;
                            "
                          >
                            <p>主题:</p>
                            <p
                              style="
                                margin: 10px 15px;
                                font-size: 20px;
                                align-items: center;
                                justify-items: center;
                              "
                            >
                              {{ msg.title }}
                            </p>
                          </div>
                          <div style="margin-left: auto; color: #9a9999">
                            {{ msg.createTime }}
                          </div>
                        </div>
                        <el-divider style="margin: 5px 0"></el-divider>
                        <div
                          style="
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            margin: 10px 0;
                            font-size: 13px;
                            color: #332f2f;
                            display: flex;
                            align-items: center;
                          "
                        >
                          <p class="send-owner">发送人</p>
                          <p class="sender">{{ msg.senderName }}</p>
                        </div>
                      </div>
                      <div
                        style="
                          display: flex;
                          width: 5%;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <el-icon
                          style="font-size: 20px; cursor: pointer"
                          @click="deletSysMsg(msg, 2)"
                          ><delete
                        /></el-icon>
                      </div>
                    </div>
                  </el-card>
                </el-scrollbar>
              </div>
            </el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in editableTabs2"
              :key="index"
              :name="item.id"
            >
              <template #label>
                <span>
                  <el-icon style="margin-right: 5px"
                    ><chat-dot-square /></el-icon
                  >From:{{ item.senderName }}
                </span>
              </template>
              <div>
                <div style="display: flex">
                  <div style="display: flex; align-items: center">
                    <p class="sender">{{ item.senderName }}</p>
                    <p style="font-size: 15px; color: black; margin: 3px 0">
                      发给
                    </p>
                    <p class="owner">我</p>
                  </div>
                  <p
                    style="
                      margin: 5px;
                      font-size: 12px;
                      color: #9a9999;
                      margin-left: auto;
                    "
                  >
                    {{ item.createTime }}
                  </p>
                  <div style="margin-left: 20px; width: 50px">
                    <el-tooltip placement="bottom-start" content="删除该消息">
                      <el-icon
                        style="font-size: 20px; cursor: pointer"
                        @click="deletSysMsg(item, 2)"
                        ><delete /></el-icon
                    ></el-tooltip>
                  </div>
                </div>
                <el-divider style="margin: 10px 0px 15px 0px"></el-divider>
                <div class="sys-detail">
                  {{ item.content }}
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      <!--我发送的私信-->
      <el-tab-pane style="margin: 10px 0">
        <template #label>
          <span>
            <p class="typeList">已发送私信</p>
          </span>
        </template>
        <div class="sys-msg">
          <el-tabs
            type="card"
            closable
            @tab-remove="removeTab3"
            v-model="sysEnalbleShow3"
          >
            <el-tab-pane label="发送列表" :name="init">
              <div v-if="total[2] === 0">
                <el-empty description="你还没有发过私信哦"></el-empty>
              </div>
              <div v-else>
                <el-scrollbar height="650px">
                  <el-card
                    shadow="hover"
                    class="single-sysmsg"
                    v-for="(msg, index2) in sendMsg"
                    :key="index2"
                    style="
                      padding: 10px;
                      margin: 5px 0;
                      font-size: 15px;
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                      height: 100px;
                    "
                  >
                    <div style="display: flex">
                      <div style="width: 95%" @click="addTab(index2, 3)">
                        <div
                          style="
                            display: flex;
                            width: 100%;
                            align-items: center;
                          "
                        >
                          <div
                            style="
                              width: 50%;
                              overflow: hidden;
                              white-space: nowrap;
                              text-overflow: ellipsis;
                              display: flex;
                            "
                          >
                            <p>主题:</p>
                            <p
                              style="
                                margin: 10px 15px;
                                font-size: 20px;
                                align-items: center;
                                justify-items: center;
                              "
                            >
                              {{ msg.title }}
                            </p>
                          </div>
                          <div style="margin-left: auto; color: #9a9999">
                            {{ msg.createTime }}
                          </div>
                        </div>
                        <el-divider style="margin: 5px 0"></el-divider>
                        <div
                          style="
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            margin: 10px 0;
                            font-size: 13px;
                            color: #332f2f;
                            display: flex;
                            align-items: center;
                          "
                        >
                          <p class="send-owner">接收人</p>
                          <p class="owner">{{ msg.ownerName }}</p>
                        </div>
                      </div>
                      <div
                        style="
                          display: flex;
                          width: 5%;
                          align-items: center;
                          justify-content: center;
                        "
                      >
                        <el-icon
                          style="font-size: 20px; cursor: pointer"
                          @click="deletSysMsg(msg, 3)"
                          ><delete
                        /></el-icon>
                      </div>
                    </div>
                  </el-card>
                </el-scrollbar>
              </div>
            </el-tab-pane>
            <el-tab-pane
              v-for="(item, index) in editableTabs3"
              :key="index"
              :name="item.id"
            >
              <template #label>
                <span>
                  <el-icon style="margin-right: 5px"
                    ><chat-dot-square /></el-icon
                  >TO:{{ item.ownerName }}
                </span>
              </template>
              <div>
                <div style="display: flex">
                  <div style="display: flex; align-items: center">
                    <p class="sender">我</p>
                    <p style="font-size: 15px; color: black; margin: 3px 0">
                      发给
                    </p>
                    <p class="owner">{{ item.ownerName }}</p>
                  </div>
                  <p
                    style="
                      margin: 5px;
                      font-size: 12px;
                      color: #9a9999;
                      margin-left: auto;
                    "
                  >
                    {{ item.createTime }}
                  </p>
                  <div style="margin-left: 20px; width: 50px">
                    <el-tooltip placement="bottom-start" content="删除该消息">
                      <el-icon
                        style="font-size: 20px; cursor: pointer"
                        @click="deletSysMsg(item, 3)"
                        ><delete /></el-icon
                    ></el-tooltip>
                  </div>
                </div>
                <el-divider style="margin: 10px 0px 15px 0px"></el-divider>
                <div class="sys-detail">
                  {{ item.content }}
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import NavigatorMenu from "../components/NavigatorMenu";
import { ElMessage } from "element-plus";
import axios from "axios";

export default {
  name: "PersonalMessage",
  components: {
    NavigatorMenu,
  },
  data() {
    return {
      tabPosition: "left",
      sysMsg: [],
      editableTabs: [],
      sysEnalbleShow: "0",
      sysEnalbleShow2: "0",
      sysEnalbleShow3: "0",
      init: "0",
      init2: "0",
      init3: "0",
      personMsg: [],
      total: [0, 0, 0],
      editableTabs2: [],
      sendMsg: [],
      editableTabs3: [],
      unreadNum: 0,
      unreadSys: 0,
      cover: require("../assets/images/apple.jpg"),
    };
  },
  created() {
    this.userId = sessionStorage.getItem("id");
    this.axios({
      methods: "get",
      url: "/api/communication/message/",
      params: {
        userId: sessionStorage.getItem("id"),
      },
    }).then((result) => {
      if (result.data.code === 200) {
        // 获取到消息列表
        var UnreadMsg = [];
        result.data.data.unreadMessages.forEach((msg) => {
          UnreadMsg.push(
            Object.assign({}, msg.message, { senderName: msg.sender.name })
          );
        });
        var alreadyReadMsg = [];
        result.data.data.readMessages.forEach((msg) => {
          alreadyReadMsg.push(
            Object.assign({}, msg.message, { senderName: msg.sender.name })
          );
        });
        UnreadMsg.sort(function (a, b) {
          return a.createTime < b.createTime;
        });
        alreadyReadMsg.sort(function (a, b) {
          return a.createTime < b.createTime;
        });
        this.personMsg = UnreadMsg.concat(alreadyReadMsg);
        this.total[1] = this.personMsg.length;
        this.unreadNum = UnreadMsg.length;
        // 处理我发送的消息
        var aa = [];
        result.data.data.sentMessages.forEach((msg) => {
          aa.push(
            Object.assign({}, msg.message, { ownerName: msg.owner.name })
          );
        });
        this.sendMsg = aa;
        this.total[2] = this.sendMsg.length;
        console.log(this.personMsg);
        console.log(this.sendMsg);
      } else {
        ElMessage({
          message: result.data.msg,
          type: "error",
        });
      }
    });
    this.axios({
      methods: "get",
      url: "/api/communication/notice/",
      params: {
        userId: sessionStorage.getItem("id"),
      },
    }).then((result) => {
      if (result.data.code === 200) {
        var msg = result.data.data;
        // 区分已读系统消息和未读系统消息
        var UnreadSys = msg.filter((msg) => msg.isRead === false);
        var alreadyRead = msg.filter((msg) => msg.isRead === true);
        this.unreadSys = UnreadSys.length;
        UnreadSys.sort(function (a, b) {
          return a.createTime < b.createTime;
        });
        alreadyRead.sort(function (a, b) {
          return a.createTime < b.createTime;
        });
        this.sysMsg = UnreadSys.concat(alreadyRead);
        this.total[0] = this.sysMsg.length;
      }
    });
    this.sendMsg.sort(function (a, b) {
      return a.createTime < b.createTime;
    });
  },
  methods: {
    perMsgSort(way) {
      var UnreadMsg = [];
      var readMsg = [];
      if (way === 1) {
        UnreadMsg = this.sysMsg.filter((msg) => msg.isRead === false);
        readMsg = this.sysMsg.filter((msg) => msg.isRead === true);
        this.unreadSys = UnreadMsg.length;
      } else {
        UnreadMsg = this.personMsg.filter((msg) => msg.isRead === false);
        readMsg = this.personMsg.filter((msg) => msg.isRead === true);
        this.unreadNum = UnreadMsg.length;
      }
      UnreadMsg.sort(function (a, b) {
        return a.createTime < b.createTime;
      });
      readMsg.sort(function (a, b) {
        return a.createTime < b.createTime;
      });
      if (way === 1) {
        this.sysMsg = UnreadMsg.concat(readMsg);
      } else {
        this.personMsg = UnreadMsg.concat(readMsg);
      }
    },
    removeTab1(targetId) {
      var tabs = this.editableTabs;
      let nextIndex = "0";
      let len = tabs.length;
      if (targetId === 0) {
        return false;
      }
      if (len > 1) {
        tabs.forEach((tab, index) => {
          if (tab.id === targetId) {
            if (index < len - 1 || index === 0) {
              nextIndex = tabs[index + 1].id;
            } else {
              nextIndex = tabs[index - 1].id;
            }
          }
        });
      }
      this.sysEnalbleShow = nextIndex;
      this.editableTabs = tabs.filter((tab) => tab.id !== targetId);
    },
    removeTab2(targetId) {
      var tabs = this.editableTabs2;
      let nextIndex = "0";
      let len = tabs.length;
      if (targetId === 0) {
        return false;
      }
      if (len > 1) {
        tabs.forEach((tab, index) => {
          if (tab.id === targetId) {
            if (index < len - 1 || index === 0) {
              nextIndex = tabs[index + 1].id;
            } else {
              nextIndex = tabs[index - 1].id;
            }
          }
        });
      }
      this.sysEnalbleShow2 = nextIndex;
      this.editableTabs2 = tabs.filter((tab) => tab.id !== targetId);
    },
    removeTab3(targetId) {
      var tabs = this.editableTabs3;
      let nextIndex = "0";
      let len = tabs.length;
      if (targetId === 0) {
        return false;
      }
      if (len > 1) {
        tabs.forEach((tab, index) => {
          if (tab.id === targetId) {
            if (index < len - 1 || index === 0) {
              nextIndex = tabs[index + 1].id;
            } else {
              nextIndex = tabs[index - 1].id;
            }
          }
        });
      }
      this.sysEnalbleShow3 = nextIndex;
      this.editableTabs3 = tabs.filter((tab) => tab.id !== targetId);
    },
    addTab(index, way) {
      var a = false;
      var b = [];
      var findId = 0;
      let ifExist = false;
      switch (way) {
        // 代表是对系统通知的操作
        case 1:
          a = this.sysMsg[index].isRead;
          this.sysMsg[index].isRead = true;
          b = this.editableTabs;
          findId = this.sysMsg[index].id;
          break;
        // 代表是对收到私信的操作
        case 2:
          a = this.personMsg[index].isRead;
          this.personMsg[index].isRead = true;
          b = this.editableTabs2;
          findId = this.personMsg[index].id;
          break;
        case 3:
          b = this.editableTabs3;
          findId = this.sendMsg[index].id;
          break;
      }
      var NextenableShow = 0;
      b.forEach((tab) => {
        if (tab.id === findId) {
          NextenableShow = tab.id;
          ifExist = true;
        }
      });
      switch (way) {
        case 1:
          this.sysEnalbleShow = NextenableShow;
          break;
        case 2:
          this.sysEnalbleShow2 = NextenableShow;
          break;
        case 3:
          this.sysEnalbleShow3 = NextenableShow;
          break;
      }
      if (!ifExist) {
        switch (way) {
          case 1:
            this.editableTabs.push(this.sysMsg[index]);
            this.sysEnalbleShow = this.sysMsg[index].id;
            this.unreadSys--;
            break;
          case 2:
            this.editableTabs2.push(this.personMsg[index]);
            this.sysEnalbleShow2 = this.personMsg[index].id;
            this.unreadNum--;
            break;
          case 3:
            this.editableTabs3.push(this.sendMsg[index]);
            this.sysEnalbleShow3 = this.sendMsg[index].id;
            break;
        }
      }
      if ((way === 1 || way === 2) && !a) {
        this.perMsgSort(way);
        // 阅读某则消息
        if (way === 1) {
          this.axios({
            method: "put",
            url: "/api/communication/viewNotice/",
            params: { noticeId: findId },
          });
        } else {
          this.axios({
            method: "put",
            url: "/api/communication/viewMessage/",
            params: { messageId: findId },
          });
        }
      }
    },
    deletSysMsg(msg, way) {
      if ((way === 1 || way === 2) && !msg.isRead) {
        if (way === 2) {
          this.unreadNum--;
        } else {
          this.unreadSys--;
        }
      }
      var tabs = [];
      switch (way) {
        case 1:
          tabs = this.sysMsg;
          this.sysMsg = tabs.filter((tab) => tab.id !== msg.id);
          this.removeTab1(msg.id);
          this.total[0]--;
          break;
        case 2:
          tabs = this.personMsg;
          this.personMsg = tabs.filter((tab) => tab.id !== msg.id);
          this.removeTab2(msg.id);
          this.total[1]--;
          break;
        case 3:
          tabs = this.sendMsg;
          this.sendMsg = tabs.filter((tab) => tab.id !== msg.id);
          this.removeTab3(msg.id);
          this.total[2]--;
          break;
      }
      this.open1();
    },
    allSetRead1() {
      // 系统通知
      console.log("一键已读——系统通知");
      this.sysMsg.forEach((a) => {
        if (a.isRead === false) {
          a.isRead = true;
          console.log(a.id);
          this.axios({
            method: "put",
            url: "/api/communication/viewNotice/",
            params: { noticeId: a.id },
          });
        }
      });
      this.unreadSys = 0;
      this.sysMsg.sort(function (a, b) {
        a.createTime < b.createTime;
      });
    },
    allSetRead2() {
      this.personMsg.forEach((a) => {
        if (a.isRead === false) {
          a.isRead = true;
          this.axios({
            method: "put",
            url: "/api/communication/viewMessage/",
            params: { messageId: a.id },
          });
        }
      });
      this.unreadNum = 0;
      this.personMsg.sort(function (a, b) {
        a.createTime < b.createTime;
      });
    },
  },
  setup() {
    const open1 = () => {
      ElMessage({
        message: "成功删除消息！",
        type: "success",
      });
    };
    return {
      open1,
    };
  },
};
</script>

<style scoped>
.big-tab ::v-deep .el-tabs__item {
  margin: 5px 0;
}
.allRead {
  margin: 1px 20px;
  display: flex;
  cursor: pointer;
}

.allRead:hover {
  text-decoration: underline;
  color: rgb(144, 144, 144);
}

.single-sysmsg:hover {
  background-color: rgb(238, 238, 238);
}

.single-sysmsg ::v-deep .el-card__body {
  width: 100%;
}

.sys-detail {
  padding: 20px;
  font-size: 15px;
  border: 1px solid;
  border-bottom-left-radius: 30px;
  border-top: none;
  border-bottom-right-radius: 30px;
  border-color: white;
  background-color: #f0f0f0;
  height: 50vh;
}

.sender {
  margin: 3px 10px;
  color: #fca80d;
  font-size: 14px;
  text-decoration: underline;
}

.owner {
  margin: 3px 10px;
  font-size: 14px;
  color: #088108;
  text-decoration: underline;
}

.send-owner {
  margin: 3px;
  color: gray;
}

.typeList {
  font-size: 15px;
  margin: 0 0 30px 0;
  font-weight: bold;
}
</style>
